<template>
  <div class="content">
    <div v-if="!dialog.visible">
      <div class="top">
        <font>{{ space.name }}</font>
        <span>设备数：{{ this.equipment.length }}</span>
        <span> 离线数：</span>
        <span style="color: red; margin-top: 9px">{{
          this.online.length
        }}</span>
        <span class="back" @click="back">
          <i class="el-icon-back"></i>
          返回</span
        >
      </div>
      <div class="contentpad">
        <el-table
          :data="filteredData"
          v-loading="loading"
          border
          style="width: 98%; font-size: 14px"
          :height="tableHeight"
          :header-cell-style="{
            'text-align': 'left',
            'border-color': '#ccffff',
            background: '#CCFFFF',
            color: '#000',
          }"
          :cell-style="{ 'text-align': 'left', 'border-color': '#fff' }"
          @selection-change="handleSelectionChange"
        >
          <el-table-column label="序号" width="80">
            <template scope="scope">
              <span v-if="scope.$index + 1 < 10">00{{ scope.$index + 1 }}</span>
              <span v-if="scope.$index + 1 > 9 && scope.$index + 1 < 100"
                >0{{ scope.$index + 1 }}</span
              >
              <span v-if="scope.$index + 1 > 99">{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="dev_id">
            <template slot="header">
              MAC
              <!-- 点击搜索框1 -->
              <el-popover placement="bottom" trigger="click">
                <MACinput @filtermac="filtermacTable" />
                <i slot="reference" class="el-icon-caret-bottom"></i>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="dev_type_name">
            <template slot="header">
              设备类型
              <!-- 点击搜索框2 -->
              <el-popover placement="bottom" trigger="click">
                <FacilityTypeinput @filter="filterTable" />
                <i slot="reference" class="el-icon-caret-bottom"></i>
              </el-popover>
            </template>
          </el-table-column>

          <el-table-column label="设备描述" align="center" prop="name">
            <template slot="header">
              设备名称
              <!-- 点击搜索框3 -->
              <el-popover placement="bottom" trigger="click">
                <FacilityNameinput @filtername="filternameTable" />
                <i slot="reference" class="el-icon-caret-bottom"></i>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="gw_id">
            <template slot="header">
              图位编号
              <!-- 点击搜索框4 -->
              <el-popover placement="bottom" trigger="click">
                <MapNumberinput @filterposition="filterpositionTable" />
                <i slot="reference" class="el-icon-caret-bottom"></i>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="60" prop="cardName">
            <template slot-scope="scope">
              <el-button
                type="text"
                :disabled="space.area_id == 0"
                @click="del(scope.row)"
                >移出</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="footer">
        <el-button
          type="primary"
          :disabled="this.space.area_id == 0"
          @click="immigrant()"
          >移入设备</el-button
        >
      </div>
    </div>
    <div style="margin-top: -22px" v-if="dialog.visible">
      <h3 style="margin-left: 20px">移入设备</h3>
      <el-table
        style="width: 98%; font-size: 14px; margin-left: 20px"
        max-height="1000"
        :data="filteredData1"
        ref="yrtable"
        border
        v-loading="loading"
        :header-cell-style="{
          'text-align': 'left',
          color: '#000',
          'border-color': '#ccffff',
          background: '#CCFFFF',
        }"
        :cell-style="{ 'text-align': 'left', 'border-color': '#fff' }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column label="序号" width="80">
          <template scope="scope">
            <span v-if="scope.$index + 1 < 10">00{{ scope.$index + 1 }}</span>
            <span v-if="scope.$index + 1 > 9 && scope.$index + 1 < 100"
              >0{{ scope.$index + 1 }}</span
            >
            <span v-if="scope.$index + 1 > 99">{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="dev_id">
          <template slot="header">
            MAC
            <!-- 点击搜索框1 -->
            <el-popover placement="bottom" trigger="click">
              <MACinput @filtermac="filtermacTable1" />
              <i slot="reference" class="el-icon-caret-bottom"></i>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="设备类型" prop="dev_type_name">
          <template slot="header">
            设备类型
            <!-- 点击搜索框2 -->
            <el-popover placement="bottom" trigger="click">
              <FacilityTypeinput @filter="filterTable1" />
              <i slot="reference" class="el-icon-caret-bottom"></i>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="设备描述">
          <template slot="header">
            设备名称
            <!-- 点击搜索框3 -->
            <el-popover placement="bottom" trigger="click">
              <FacilityNameinput @filtername="filternameTable1" />
              <i slot="reference" class="el-icon-caret-bottom"></i>
            </el-popover>
          </template>
          <template slot-scope="scope">
            <span>
              {{ scope.row.btn_func_name || "--" }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="图位编号" prop="gw_id">
          <template slot="header">
            图位编号
            <!-- 点击搜索框4 -->
            <el-popover placement="bottom" trigger="click">
              <MapNumberinput @filterposition="filterpositionTable1" />
              <i slot="reference" class="el-icon-caret-bottom"></i>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          type="selection"
          width="50"
          align="center"
        ></el-table-column>
      </el-table>
      <div class="footer">
        <el-button type="info" @click="hideDialog('dialog', 'visible')"
          >关闭</el-button
        >
        <el-button type="primary" @click="submit">添加</el-button>
      </div>
    </div>
  </div>
</template>

<script>
// import { count } from "console";
import Api from "../api/api";
import MACinput from "@/components/cominput/MACinput.vue";
import FacilityTypeinput from "@/components/cominput/FacilityTypeinput.vue";
import FacilityNameinput from "@/components/cominput/FacilityNameinput.vue";
import MapNumberinput from "@/components/cominput/MapNumberinput.vue";

export default {
  components: {
    MACinput,
    FacilityTypeinput,
    FacilityNameinput,
    MapNumberinput,
  },
  props: {
    propName: Array,
    space: Object,
  },
  inject: ["reload"],
  data() {
    return {
      list: [],
      filteredData1: [],
      equipment: [],
      filteredArr: [],
      filteredData: [],
      online: [],
      // localSid: localStorage.getItem("sid"),
      localSid: "577688740d9d258b92c61e6b1f5498ff",
      state: "",
      show: true,
      count: null,
      options: "",
      name: "",
      loading: true,
      dialog: {
        visible: false,
      },
      // selection: [],
      /* 表格高度自适应 */
      tableHeight: window.innerHeight - 200,
    };
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  async created() {
    console.log("父传子穿过来的空间id>", this.space.area_id);
    // 获取空间卡片内容的接口
    let ref = await Api.query_areas({ params: { sid: this.localSid } });
    this.options = ref.result.areas;

    let ref1 = await Api.query_all_device_ep_by_area_id({
      params: { sid: this.localSid, area_id: this.space.area_id },
    });

    this.equipment = ref1.result.device_ep_list;
    this.filteredData = JSON.parse(JSON.stringify(this.equipment));
    this.online = this.equipment.filter((item) => item.online === 0);
    console.log("离线数>", this.online.length);
    console.log("卡片里面数据源>", this.equipment);

    //带有mac列数据的接口
    let res2 = await Api.exc({
      params: { sid: this.localSid },
    });
    res2.result.device_ep_list.forEach((el) => {
      this.$set(el, "settingMode", false);
      this.$set(el, "openLevelIsClose", false);
      this.$set(el, "brightnessIsClose", false);
      this.$set(el, "openLevelIsOpen", false);
      this.$set(el, "brightnessIsOpen", false);
      this.$set(el, "popVisible", false);
      this.$set(el, "isHighLight", false);
      this.$set(el, "timer", null);
      if (el.rgb) {
        this.$set(el, "colors", "#" + el.rgb);
      }
      if (el.target_temp) {
        el.target_temp = el.target_temp / 10;
      }
    });
    console.log("进来了res2>", res2);
    function compare(property) {
      return function (a, b) {
        var value1 = a[property];
        var value2 = b[property];
        return value2 - value1;
      };
    }
    res2.result.device_ep_list.sort(compare("online"));
    this.list = res2.result.device_ep_list;
    this.filteredData1 = JSON.parse(JSON.stringify(this.list));
    console.log("移入设备里面的数据源>", this.filteredData1);
    this.loading = false;
  },
  methods: {
    filtermacTable(keywords) {
      if (keywords.trim() === "") {
        this.filteredData = JSON.parse(JSON.stringify(this.equipment));
      } else {
        this.filteredData = this.equipment.filter((row) => {
          return row.dev_id.includes(keywords);
        });
      }
    },
    filtermacTable1(keywords) {
      if (keywords.trim() === "") {
        this.filteredData1 = JSON.parse(JSON.stringify(this.list));
      } else {
        this.filteredData1 = this.list.filter((row) => {
          return row.dev_id.includes(keywords);
        });
      }
    },
    // filterTable(keywords) {
    //   if (keywords.trim() === "") {
    //     this.filteredData = JSON.parse(JSON.stringify(this.equipment));
    //   } else {
    //     this.filteredData = this.equipment.filter((row) => {
    //       return row.dev_type_name.includes(keywords);
    //     });
    //   }
    // },
    filterTable(keywords) {
      if (keywords.trim() === "") {
        this.filteredData = JSON.parse(JSON.stringify(this.equipment));
      } else {
        this.filteredData = this.equipment.filter((row) => {
          return row.dev_type_name.includes(keywords);
        });
      }
    },
    filterTable1(keywords) {
      if (keywords.trim() === "") {
        this.filteredData1 = JSON.parse(JSON.stringify(this.list));
      } else {
        this.filteredData1 = this.list.filter((row) => {
          return row.dev_type_name.includes(keywords);
        });
      }
    },
    filternameTable(keywords) {
      if (keywords.trim() === "") {
        this.filteredData = JSON.parse(JSON.stringify(this.equipment));
      } else {
        this.filteredData = this.equipment.filter((row) => {
          return row.name.includes(keywords);
        });
      }
    },
    filternameTable1(keywords) {
      if (keywords.trim() === "") {
        this.filteredData1 = JSON.parse(JSON.stringify(this.list));
      } else {
        this.filteredData1 = this.list.filter((row) => {
          return row.btn_func_name.includes(keywords);
        });
      }
    },
    filterpositionTable(keywords) {
      if (keywords.trim() === "") {
        this.filteredData = JSON.parse(JSON.stringify(this.equipment));
      } else {
        this.filteredData = this.equipment.filter((row) => {
          return row.gw_id.includes(keywords);
        });
      }
    },
    filterpositionTable1(keywords) {
      if (keywords.trim() === "") {
        this.filteredData1 = JSON.parse(JSON.stringify(this.list));
      } else {
        this.filteredData1 = this.list.filter((row) => {
          return row.gw_id.includes(keywords);
        });
      }
    },
    // 多选
    handleSelectionChange(e) {
      this.filteredArr = e.map(({ dev_id, ep_id, name, area, position }) => ({
        dev_id,
        ep_id,
        name,
        area,
        position,
      }));

      this.filteredArr.forEach(
        (item) => (item.area.area_id = this.space.area_id)
      );
      console.log("复选框内容", this.filteredArr);
      // this.selection = e;
    },
    // 移入设备
    immigrant() {
      this.dialog.visible = true;
      this.$nextTick(() => {
        for (let i = 0, len = this.filteredData1.length; i < len; i++) {
          let dev_id = this.filteredData1[i].dev_id;
          let ep_id = this.filteredData1[i].ep_id;
          this.filteredData.forEach((el) => {
            if (dev_id == el.dev_id && ep_id == el.ep_id) {
              this.$refs.yrtable.toggleRowSelection(
                this.filteredData1[i],
                true
              );
            }
          });
        }
      });
    },
    querySearch(queryString, cb) {
      var restaurants = this.list;
      console.log("this.list>>", this.list);
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },

    back() {
      this.$emit("back");
    },
    // 移 除
    async del(row) {
      console.log("row>>>", row);
      await Api.update_device_ep_detail({
        params: {
          sid: this.localSid,
          device_ep_list: [
            {
              dev_id: row.dev_id,
              ep_id: row.ep_id,
              name: row.name,
              area: { area_id: 0 },
              position: row.position,
            },
          ],
        },
      });
      this.$message({
        type: "success",
        message: "移出成功",
      });

      // this.equipment = this.equipment.filter((item) => item.delete_flag != id);
    },
    // 添加
    async submit() {
      await Api.update_device_ep_detail({
        params: {
          sid: this.localSid,
          device_ep_list: this.filteredArr,
          // device_ep_list: this.ddss,

          // device_ep_list: [
          //   {
          //     dev_id: row.dev_id,
          //     ep_id: row.ep_id,
          //     name: row.name,
          //     area: { area_id: 0 },
          //     position: row.position,
          //   },
          // ],
        },
      });

      this.$message({
        showClose: true,
        type: "success",
        message: "添加成功",
      });
      this.reload();
      this.dialog.visible = false;
    },
    hideDialog(dialog, visible) {
      this[dialog][visible] = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.content {
  width: 100%;
  height: calc(100vh - 80px);
  // 去除滚动条
  ::v-deep .el-table th.gutter {
    display: none;
    width: 0;
  }
  ::v-deep .el-table colgroup col[name="gutter"] {
    display: none;
    width: 0;
  }
  ::v-deep .el-table__body {
    width: 100% !important;
  }

  ::-webkit-scrollbar {
    display: none;
  }

  .top {
    position: relative;
    width: 96%;
    height: 40px;
    display: flex;
    margin-left: 30px;
    box-sizing: border-box;

    .back {
      position: absolute;
      right: 10px;
      cursor: pointer;
    }

    span {
      margin: 9px 0 0 10px;
    }

    font {
      font-size: 24px;
    }
  }

  .my-autocomplete {
    li {
      line-height: normal;
      padding: 7px;

      .inputname {
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .addr {
        font-size: 12px;
        color: #b4b4b4;
      }

      .highlighted .addr {
        color: #ddd;
      }
    }
  }

  .contentpad {
    width: 98%;
    margin-left: 30px;
    box-sizing: border-box;
  }

  .footer {
    position: fixed;
    right: 3%;
    bottom: 2%;
  }
}
</style>
